<template>
  <div>
    <el-dialog
      :model-value="visible"
      :title="emp.id != 0 ? '编辑员工' : '添加员工'"
      width="850"
      :close-on-click-modal="false"
      @close="cls"
    >
      <el-form
        ref="formDept"
        :model="emp"
        label-width="150px"
        :rules="rules"
        style="width: 800px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号：" prop="user.account">
              <el-input
                v-model="emp.user.account"
                placeholder="请输入账号"
                @blur="chick"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码：" prop="user.password">
              <el-input
                v-model="emp.user.password"
                type="password"
                show-password
                placeholder="请输入密码"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名：" prop="name">
              <el-input v-model="emp.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式：" prop="mobile">
              <el-input v-model="emp.mobile" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="所属部门：">
              <el-tree-select
                v-model="emp.deptId"
                check-strictly
                :data="deptTree"
                :render-after-expand="false"
                style="width: 100%"
                :props="{
                  children: 'children',
                  label: 'name',
                  value: 'id'
                }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务：">
              <el-input v-model="emp.job" placeholder="请输入职务" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="底薪：">
              <el-input-number v-model="emp.salary" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工生日：">
              <el-date-picker
                v-model="emp.birthday"
                type="date"
                placeholder="请选择日期"
                :disabled-date="disabledDate"
                :shortcuts="shortcuts"
                style="width: 100%"
                format="MM-DD"
                value-format="MM-DD"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="入职时间：">
              <el-date-picker
                v-model="emp.entryDate"
                type="date"
                placeholder="请选择日期"
                :disabled-date="disabledDate"
                :shortcuts="shortcuts"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色：">
              <el-select
                v-model="emp.roleId"
                placeholder="请选择角色"
                style="width: 100%"
              >
                <el-option
                  v-for="item in roles"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="类型：">
              <el-radio-group v-model="emp.type">
                <el-radio :value="1" size="large">普通员工</el-radio>
                <el-radio :value="2" size="large">内销</el-radio>
                <el-radio :value="3" size="large">外销</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品参数支持：">
              <el-radio-group v-model="emp.pp">
                <el-radio :value="1" size="large">需要审核</el-radio>
                <el-radio :value="2" size="large">无需审核</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cls">关闭</el-button>
          <el-button type="primary" @click="save"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { saveEmp, updateEmp } from "@/api/system/employee.js";
import { accountChick } from "@/api/system/users.js";
import { queryTree } from "@/api/system/dept.js";

const emp = ref({
  user: {
    id: "",
    account: "",
    password: ""
  },
  id: 0,
  name: "",
  mobile: "",
  deptId: null,
  job: "",
  salary: 0,
  birthday: "",
  entryDate: "",
  roleId: "",
  type: 1,
  pp: 1,
  performance: 0,
  userId: 0
});
//定义检查状态
const isAcount = ref(true);
//定义部门列表
const depts = ref([{ id: 1, name: "人事部门" }]);
//定义角色列表
const roles = ref([{ id: 2, name: "管理员" }]);
//定义组件属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: true
  }
});
//定义部门树
const deptTree = ref([]);

//同名引用
const formDept = ref(null);
const rules = reactive({
  user: {
    account: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }]
  },
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }]
});

//定义事件
const emits = defineEmits(["close", "reflush"]);
function cls() {
  emits("close");
  emits("reflush");
}

//初始化方法，用于传参
function init(data) {
  getDeptTree();
  if (data) {
    let tmp = data;
    tmp.user = {};
    tmp.user.id = data.userId;
    tmp.user.account = data.account;
    tmp.user.name = data.name;
    emp.value = tmp;
  } else {
    emp.value = {
      user: {
        id: "",
        account: "",
        password: ""
      },
      id: 0,
      name: "",
      mobile: "",
      deptId: null,
      job: "",
      salary: 0,
      birthday: "",
      entryDate: "",
      roleId: "",
      type: 1,
      pp: 1,
      performance: 0,
      userId: 0
    };
  }
}
//暴露init方法，方便父组件调用
defineExpose({ init });

//同名检查
async function chick() {
  let res = await accountChick(emp.value.user.account);
  if (res.data > 0) {
    isAcount.value = false;
    ElMessage({
      message: "账号重复",
      type: "warning"
    });
    return;
  } else {
    isAcount.value = true;
  }
}

//获取部门树

async function getDeptTree() {
  let res = await queryTree();
  if (res.code == 200) {
    deptTree.value = res.data;
  }
}
//保存
async function save() {
  if (!isAcount.value) {
    ElMessage({
      message: "账号重复",
      type: "warning"
    });
  }
  const valid = formDept.value.validate;
  if (!valid) return;
  let res = ref({});
  if (emp.value.id == 0) {
    //发送数据
    console.log(emp.value);
    res.value = await saveEmp(emp.value);
  } else {
    res.value = await updateEmp(emp.value);
  }
  if (res.value.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    emp.value = {
      user: {
        id: "",
        account: "",
        password: ""
      },
      id: 0,
      name: "",
      mobile: "",
      deptId: null,
      job: "",
      salary: 0,
      birthday: "",
      entryDate: "",
      roleId: "",
      type: 1,
      pp: 1,
      performance: 0
    };
    cls();
  }
}
</script>
<style scoped></style>
